<template>
  <div class="learnbody">
  <Transition :duration="550" name="nested" appear>
    <div class="section-content row">
      <h1>不学习又不会死</h1>
      <p class="typography-hero-intro">不学习会变丑</p>
    </div>
  </Transition>
  <div class="knowledge">
    <el-row class="tac" :gutter="20">
      <el-col :span="6">
        <el-menu
          background-color="#d9ecff"
          default-active="1"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-sub-menu v-for="( menu1, index ) in data.list" :key="index" :index="menu1.id">
            <template #title>
              <el-icon><Notebook /></el-icon>
              <span>{{ menu1.name }}</span>
            </template>
            <el-menu-item v-for="( menu2, index) in menu1.child" 
            :key="index" 
            :index="menu2.id"
            @click="showMd(menu2)">
              <el-icon>
                <Tickets /></el-icon>
              {{ menu2.name }}
            </el-menu-item>
          </el-sub-menu>   
        </el-menu>
      </el-col>
      
      <el-col :span="18">
        <div class="paper">
          <MdView :md="htmlMD"/>
          <!-- <div v-html="getHtmlMD()"></div> -->
        </div>
      </el-col>
    </el-row>
  </div>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onBeforeMount, onMounted, ref } from "vue";
import MdView from "./MdView.vue";
import { menu, menus } from "@/type/LearnMenu";
import axios from '../../request';

export default defineComponent({

  name: "learn-view",
  components: {
    MdView,
  },
  setup() {
    // let htmlMD = "qqq";
    let htmlMD = ref('/md/jvm/section1.md');
 
    const handleOpen = (key: string, keyPath: string ) => {
        console.log(key, keyPath);
    }
    const handleClose = (key: string, keyPath: string ) => {
        console.log(key, keyPath);
    }
    const showMd = (m: menu) => {
      htmlMD.value = m.path ?? "";
    }

    const data = reactive(new menus());
    // 请求需要的参数
    const parms = axios.get<menu[]>("/dataLearn.json");
    parms.then((res)=>{
      data.list = res.data;
    });

    return {
      htmlMD,
      handleOpen,
      handleClose,
      showMd,
      data
    };
  },
});
</script>
<style>
.learnbody{
  background-color: #ecf5ff;
  min-height:90vh;
}
.knowledge{
  text-align: center;
  max-width: 1380px;
  margin-left: auto;
  margin-right: auto;
}
.paper{
  background-color:#f0f9eb;
  min-height: 50vh;
}
</style>../../type/LearnMenu